* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

// 内容
.circle {
  .titlebox {
    text-align: center;
    width: 100%;

    .title-tit {
      font-size: 2.5rem;
      transition: text-shadow 0.3s ease;
    }

    .title-tit:hover {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .title-p {
      color: #666666;
      font-size: 2rem;
      transition: text-shadow 0.3s ease;
    }

    .title-p:hover {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
  }

  // 热门活动
  .hotbox {
    width: 80%;
    margin: auto;

    .hotbody {
      width: 66%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden;

      .hotimg {
        width: 50%;
        height: 360px;
        margin-top: 4%;
        text-align: center;
        overflow: hidden;

        // 干货
        .cargo {
          flex: 1;
          text-align: center;
          padding: 10% 8%;
          box-sizing: border-box;
          background-color: #DDE2EF;
          overflow: hidden;

          .cargop {
            font-size: 2.5em;
            margin-bottom: 10%;
            color: #6078BF;
          }

          .cargotext {
            font-size: 1.2em;
            color: #6078BF;
          }

          .more {
            display: flex;
            justify-content: right;
            margin-top: 22%;
            transform: translateX(100%);
            /* 将小盒子平移到右边 */
            transition: transform 0.3s ease;
            /* 添加 transform 过渡效果 */

            & a {
              color: #ABABAF;
              text-decoration: none;
            }
          }
        }

        .cargo:hover .more {
          transform: translateX(0);
          /* 鼠标经过大盒子时，将小盒子平移到左边 */
        }

        .cargo2 {
          flex: 1;
          text-align: center;
          padding: 10% 8%;
          box-sizing: border-box;
          background-color: #D4ECFF;
          overflow: hidden;

          .cargop2 {
            font-size: 2.5em;
            margin-bottom: 10%;
            color: #1A78C0;
          }

          .cargotext2 {
            font-size: 1.2em;
            color: #1A78C0;
          }

          .more2 {
            display: flex;
            justify-content: right;
            margin-top: 22%;
            transform: translateX(100%);
            transition: transform 0.3s ease;

            & a {
              color: #ABABAF;
              text-decoration: none;
            }
          }
        }

        .cargo2:hover .more2 {
          transform: translateX(0);
        }

        // 干货

        & img {
          max-width: 100%;
          height: auto;
          transition: all 1.5s;
        }
      }

      .hotimg:hover img {
        transform: scale(1.2);
      }

      .hotcenter {
        width: 24%;
        height: 30%;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: solid 1px #989898;
        transition: box-shadow 0.3s ease;
        /* 添加过渡效果 */
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;

        & p {
          font-size: 2em;
          transition: all 1.5s;
        }
      }

      .hotcenter:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 1);

        /* 在鼠标悬停时添加阴影 */
        & p {
          transform: scale(1.2);
        }
      }
    }

    .hotto {
      text-align: center;
      width: 100%;
      margin-top: 4%;

      .hotbut {
        margin: auto;
        text-align: center;
        background-color: #1A42BB;
        font-size: 1.6em;
        padding: 0.5% 1.5%;
        border: none;
        border-radius: 40px;

        & a {
          color: white;
          text-decoration: none;
        }
      }
    }
  }

  // 热门活动
  // 营友分享
  .share {
    width: 66%;
    margin: auto;
    margin-top: 6%;

    .sharebox {
      margin-top: 4%;

      .sharetit {
        width: 60%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        font-size: 2em;
        .rollbut{
          position: relative;
          cursor: pointer;
        }
        .rollbut::after{
          content: "";
          position: absolute;
          left: 0;
          bottom: -5px;
          width: 0;
          height: 4px;
          background-color: black;
          transition: width 0.3s  ease;
        }
        .rollbut:hover::after{
          width: 100%;
        }
      }
    }
  }

  // 营友分享
}

// 内容
